// 引入 react 依赖
import React, { Component, useState, useEffect } from 'react';
import { connect } from 'react-redux';
import { NativeEventEmitter, ScrollView, TextInput, NativeModules, Platform, StyleSheet, Text, View, Image, TouchableOpacity, Alert, Switch, ImageBackground } from 'react-native';

// 引入第三方依赖
import _ from 'lodash';
import axios from 'axios';
import Icon from 'react-native-vector-icons/dist/Ionicons';
import pureRender from 'pure-render-decorator';
import { Actions } from 'react-native-router-flux';

// antd 按需加载
import { Tabs, Toast, Portal } from '@ant-design/react-native';

// 引入 处理数据 所需文件
import { subscriptionList } from '../../../module/module.js'

// 引入样式
import Style from '../style.js';

// 引入公用组件
import { Layout, Title, NetInfoScene, Results, RefreshScrollView, ScrollableTabBar } from '../../../components/index.js'

// 引入专用组件
import { } from '../components/index.js'

// 引入工具包

import { nblogo, classDefault } from '../../../util/images.js'
import { size, longitude, latitude, ScreenWidth } from '../../../util/utils.js'


class Subscribe extends Component {

    constructor(props) {
        super(props)
        this.state = {
            list: []
        }
    }

    componentDidMount() {
        this.loading = Toast.loading('加载中', 0)
        this.loadData()
    }

    loadData() {
        const { userInfo } = this.props
        subscriptionList({ id: userInfo.id }).then(res => {
            this.setState({
                list: res.data
            })
        }).finally(() => {
            Portal.remove(this.loading)
            this.setState({
                refreshing: false
            })
        })
    }

    getContractType(contractType) {
        if (contractType == 'quarter') {
            return '季度'
        }
        if (contractType == 'this_week') {
            return '当周'
        }
        if (contractType == 'next_week') {
            return '次周'
        }
    }

    onRefresh = () => {
        this.setState({ refreshing: true });
        this.loadData()
    }

    render() {
        const { value } = this.props
        const { list, refreshing } = this.state
        return (
            <RefreshScrollView
                style={{}}
                refreshing={refreshing}
                onRefresh={this.onRefresh}
            >
                {list.map((item, index) => {
                    return (
                        <TouchableOpacity key={index} onPress={() => Actions.userInfo({ userId: item.userId })}>
                            <View style={{ marginHorizontal: 12, borderRadius: 8, overflow: 'hidden', backgroundColor: '#181E3A', paddingTop: .5, marginTop: 16, marginBottom: 8, paddingTop: 12 }}>
                                <View style={{ flexDirection: 'row', alignItems: 'flex-start', marginBottom: 12, paddingLeft: 12 }}>
                                    <TouchableOpacity onPress={() => Actions.userInfo()}>
                                        <View style={{ width: 44, height: 44, position: 'relative' }}>
                                            {/* <Image resizeMode='cover' style={{ position: 'absolute', width: 18, height: 15, top: -7, left: -1.5 }} source={require('../../../static/images/icon-hot.png')} /> */}
                                            <View style={{}}>
                                                <Image resizeMode='cover' source={{ uri: item.headImg || '' }} style={{ width: 44, height: 44, borderRadius: 22, backgroundColor: '#fff' }} />
                                            </View>
                                        </View>
                                    </TouchableOpacity>
                                    <View style={{ marginLeft: 15 }}>
                                        <View style={{ marginBottom: 8, flexDirection: 'row', }}>
                                            <Text style={{ fontSize: 14, color: '#E4E4E4', lineHeight: 20, }}>{item.nickName || ''}</Text>
                                            <View style={{ marginLeft: 12, paddingHorizontal: 8, paddingVertical: 3, borderWidth: .5, borderRadius: 2, borderColor: '#7484FF' }}>
                                                <Text style={{ fontSize: 10, color: '#7484FF', lineHeight: 14, height: 14 }}>{item.exchangeName || ''}</Text>
                                            </View>
                                        </View>
                                        <View style={{ flexDirection: 'row', alignItems: 'center', }}>
                                            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                                                <View style={{ paddingHorizontal: 8, paddingVertical: 3, borderWidth: .5, borderRadius: 2, borderColor: '#00C898', backgroundColor: '#00C898', marginRight: 16 }}>
                                                    <Text style={{ fontSize: 10, color: '#fff', lineHeight: 14, height: 14 }}>单{item.buyMultiple || 0}倍</Text>
                                                </View>
                                                <View style={{ paddingHorizontal: 8, paddingVertical: 3, borderWidth: .5, borderRadius: 2, borderColor: '#FF5757', backgroundColor: '#FF5757', marginRight: 16 }}>
                                                    <Text style={{ fontSize: 10, color: '#fff', lineHeight: 14, height: 14 }}>空{item.sellMultiple || 0}倍</Text>
                                                </View>
                                            </View>

                                            <Text style={{ fontSize: 12, color: '#8A90A8', lineHeight: 17, }}>提醒方式：</Text>
                                            <View style={{ marginLeft: 4, flexDirection: 'row', alignItems: 'center', }}>
                                                <Text style={{ fontSize: 12, color: '#97A3FF', lineHeight: 17, }}>只订阅不提醒</Text>
                                                <Image resizeMode='cover' style={{ width: 12, height: 12, marginLeft: 5 }} source={require('../../../static/images/arraw-bottom.png')} />
                                            </View>
                                        </View>
                                    </View>
                                </View>
                                {value && (
                                    <ScrollView
                                        horizontal
                                        style={{
                                            paddingLeft: 2,
                                        }}
                                    >
                                        {item.positionList && item.positionList.map((positionListItem, positionListIndex) => {
                                            return (
                                                <View key={positionListIndex} style={{ width: 110, marginLeft: 10, backgroundColor: '#334185', borderRadius: 8, overflow: 'hidden' }} >
                                                    <TouchableOpacity onPress={() => Actions.positionDetails({ exchangeId: item.exchangeApiId, id: item.id, userId: item.userId })}>
                                                        <View style={{ borderRadius: 8 }}>
                                                            <View style={{ marginTop: .5, borderTopLeftRadius: 8, borderTopRightRadius: 8, backgroundColor: '#181E3A' }}>
                                                                <View style={{ backgroundColor: '#232B54', borderTopLeftRadius: 8, borderTopRightRadius: 8, borderBottomRightRadius: 16, }}>
                                                                    <View style={{ paddingHorizontal: 6 }}>
                                                                        <Text style={{ fontSize: 11, color: positionListItem.direction == 'buy' ? '#00C898' : '#FF5757', lineHeight: 28, }}>{positionListItem.symbol} {this.getContractType(positionListItem.contractType)}·{positionListItem.direction == 'buy' && ('单')}{positionListItem.direction == 'sell' && ('空')}</Text>
                                                                    </View>
                                                                </View>
                                                            </View>
                                                            <View style={{ backgroundColor: '#232B54', }}>
                                                                <View style={{ paddingHorizontal: 6, borderTopLeftRadius: 16, backgroundColor: '#181E3A', }}>
                                                                    <View style={{ marginBottom: 4, marginTop: 4 }}>
                                                                        <Text style={{ fontSize: 18, color: positionListItem.profitRate >= 0 ? '#00C898' : '#FF5757', lineHeight: 25, }}>{positionListItem.profitRate * 100 || 0}%</Text>
                                                                    </View>
                                                                    <View style={{}}>
                                                                        <View style={{ marginBottom: 8, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', }}>
                                                                            <Text style={{ fontSize: 10, color: '#8A90A8', lineHeight: 14, }}>均价</Text>
                                                                            <Text style={{ fontSize: 10, color: '#8A90A8', lineHeight: 14, }}>${positionListItem.costHold || 0}</Text>
                                                                        </View>
                                                                        <View style={{ marginBottom: 8, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', }}>
                                                                            <Text style={{ fontSize: 10, color: '#8A90A8', lineHeight: 14, }}>持仓</Text>
                                                                            <Text style={{ fontSize: 10, color: '#8A90A8', lineHeight: 14, }}>{positionListItem.volume || 0}张</Text>
                                                                        </View>
                                                                        <View style={{ marginBottom: 8, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', }}>
                                                                            <Text style={{ fontSize: 10, color: '#8A90A8', lineHeight: 14, }}>价值</Text>
                                                                            <Text style={{ fontSize: 10, color: '#8A90A8', lineHeight: 14, }}>{positionListItem.lastPrice || 0}</Text>
                                                                        </View>
                                                                        <View style={{ marginBottom: 8, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', }}>
                                                                            <Text style={{ fontSize: 10, color: '#8A90A8', lineHeight: 14, }}>交易所</Text>
                                                                            <Text style={{ fontSize: 10, color: '#8A90A8', lineHeight: 14, }}>{positionListItem.exchangeName || 0}</Text>
                                                                        </View>
                                                                    </View>
                                                                </View>
                                                            </View>
                                                        </View>
                                                    </TouchableOpacity>
                                                </View>
                                            )
                                        })}
                                        <View style={{ width: 12 }}></View>
                                    </ScrollView>
                                )}
                            </View>
                        </TouchableOpacity>
                    )
                })}
            </RefreshScrollView >
        )
    }
}

export default connect(({ userInfo }) => ({
    userInfo,
}))(pureRender(Subscribe))
